<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">



		<!-- 		
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"> -->


		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">


		<title>栅格系统 col-sm-xxx</title>

		<!-- 课程使用的是 3.3.7 bootstrap  -->

		<style>
			div {

				border: 0.2px solid #dddddd;
			}
		</style>
	</head>
	<body>



		<div class="container">


			<div class="row">
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
				<div class="col-sm-1">.col-sm-1</div>
			</div>
			<div class="row">
				<div class="col-sm-8">.col-sm-8</div>
				<div class="col-sm-4">.col-sm-4</div>
			</div>
			<div class="row">
				<div class="col-sm-4">.col-sm-4</div>
				<div class="col-sm-4">.col-sm-4</div>
				<div class="col-sm-4">.col-sm-4</div>
			</div>
			<div class="row">
				<div class="col-sm-6">.col-sm-6</div>
				<div class="col-sm-6">.col-sm-6</div>
			</div>



		</div>







	</body>
</html>
